<script setup lang="ts">
import { reactive, ref } from 'vue';
import { postAction } from '@/service/request/action';
import { setAssignRoleApi, viewAssignRoleApi } from '@/service/path/admin';
import { StatusMessage } from '@/enum';

interface Props {
  roleList: Api.Auth.Role[];
}
defineProps<Props>();
const formRef = ref();
const state = reactive({
  isShowDialog: false,
  loading: false,
  ruleForm: {
    roleIds: [],
    userId: ''
  },
  rules: {

  }
});
const openDialog = (id: string) => {
  state.isShowDialog = true;
  state.ruleForm.userId = id;
  postAction(viewAssignRoleApi, {
    id
  }).then(res => {
    if (!res.error) {
      state.ruleForm.roleIds = res.data.data;
    }
  });
};
const closeDialog = () => {
  state.isShowDialog = false;
};
const clickConfirm = () => {
  state.loading = true;
  postAction(setAssignRoleApi, state.ruleForm).then(res => {
    state.loading = false;
    if (!res.error) {
      window.$message?.success(StatusMessage.SUCCESS);
      closeDialog();
    }
  })
};
defineExpose({
  openDialog
});
</script>

<template>
  <n-modal v-model:show="state.isShowDialog" preset="dialog" title="分配角色"
           style="width: 600px" :show-icon="false" :close-on-esc="false" :mask-closable="false">
    <n-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-placement="left" label-width="100" require-mark-placement="left">
      <n-grid responsive="screen" item-responsive>
        <n-form-item-gi span="24" label="分配角色" path="roleIds">
          <n-select v-model:value="state.ruleForm.roleIds" placeholder="请选择角色" multiple max-tag-count="responsive"
                    :options="roleList" label-field="name" value-field="id" filterable></n-select>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <template #action>
      <n-space justify="end">
        <n-button @click="closeDialog">取消</n-button>
        <n-button type="primary" @click="clickConfirm" :loading="state.loading">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<style scoped>

</style>
